<template>
	<div id="tag" class="container">
		<h3 class="title"><span />标签管理</h3>

		<el-tabs v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
			<el-tab-pane v-for="item in langList" :key="item.id" :label="item.lang" :name="item.lang" />
		</el-tabs>
		<div class="content">
			<el-button
				type="primary"
				icon="el-icon-plus"
				size="small"
				style="margin-bottom: 15px; margin-left: 15px"
				class="add four"
				@click="goAdd"
				>添加标签</el-button
			>
			<el-table
				:data="tagData"
				border
				stripe
				:header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }"
			>
				<el-table-column prop="id" label="ID" width="80px" />
				<el-table-column prop="title" label="标签名称" />
				<el-table-column prop="tag_hit" label="标签点击数" />
				<el-table-column prop="article_count" label="标签文章数" />
				<el-table-column prop="is_recommend" label="是否推荐" width="160px">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.is_recommend"
							:active-value="1"
							:inactive-value="2"
							active-text="推荐"
							inactive-text="不推荐"
							active-color="#f84311"
							inactive-color="rgba(0,0,0,0.1)"
							@change="changeRecommend(scope.row)"
						/>
						<!-- <span v-if="scope.row.is_recommend == 1">推荐</span>
            <span v-else-if="scope.row.is_recommend == 2">不推荐</span> -->
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" width="150px">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							:active-value="1"
							:inactive-value="2"
							active-text="正常"
							inactive-text="禁用"
							active-color="#f84311"
							inactive-color="rgba(0,0,0,0.1)"
							@change="changeStatus(scope.row)"
						/>
						<!-- <span v-if="scope.row.status == 1">正常</span>
            <span v-else-if="scope.row.status == 2">隐藏</span> -->
					</template>
				</el-table-column>
				<el-table-column label="seo标题" prop="seo_title" />
				<el-table-column label="seo关键词" prop="seo_keywords" show-overflow-tooltip />
				<el-table-column label="seo描述" prop="seo_description" show-overflow-tooltip />
				<el-table-column label="操作" fixed="right" width="150px">
					<template slot-scope="scope">
						<el-button class="edit" size="mini" @click="edit(scope.row)">编辑</el-button>
						<el-button class="dele" size="mini" @click="dele(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<BouncedDialog
				:title="addForm.id ? '编辑' : '添加'"
				:dialog-show.sync="dialogShow"
				width="50%"
				class="inner"
			>
				<el-form ref="addForm" :model="addForm" :rules="rules" class="addForm" label-width="100px">
					<el-form-item label="标签名:" prop="title">
						<el-input v-model="addForm.title" />
					</el-form-item>
					<el-form-item label="标签文章数:" prop="article_count">
						<el-input v-model="addForm.article_count" />
					</el-form-item>
					<el-form-item label="标签点击数:" prop="tag_hit">
						<el-input v-model="addForm.tag_hit" />
					</el-form-item>
					<el-form-item label="Title:" prop="seo_title">
						<el-input v-model="addForm.seo_title" />
					</el-form-item>
					<el-form-item label="Keyword:" prop="seo_keywords">
						<el-input v-model="addForm.seo_keywords" />
					</el-form-item>
					<el-form-item label="Description:" prop="seo_description">
						<el-input v-model="addForm.seo_description" type="textarea" />
					</el-form-item>
					<el-form-item label="状态:">
						<el-switch
							v-model="addForm.status"
							active-text="正常"
							inactive-text="隐藏"
							:active-value="1"
							:inactive-value="2"
							active-color="#f84311"
							inactive-color="rgba(0,0,0,0.2)"
						/>
					</el-form-item>
					<el-form-item label="是否推荐:">
						<el-switch
							v-model="addForm.is_recommend"
							active-text="推荐"
							inactive-text="不推荐"
							:active-value="1"
							:inactive-value="2"
							active-color="#f84311"
							inactive-color="rgba(0,0,0,0.2)"
						/>
					</el-form-item>
					<div class="btn">
						<el-button @click="dialogShow = false">取 消</el-button>
						<el-button type="primary" @click="submit()">确 定</el-button>
					</div>
				</el-form>
			</BouncedDialog>
			<el-pagination
				:current-page="page.currentPage"
				:page-sizes="page.pageSizes"
				:page-size="page.size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
				:hide-on-single-page="page.total < page.size ? true : false"
				style="margin-top: 20px"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
	</div>
</template>
<script>
import tagApi from '@/api/tag.js'
import websetApi from '@/api/websetting'
export default {
	data() {
		return {
			tagData: [],
			langList: [],
			activeName: '',
			dialogShow: false,
			addForm: {
				id: '',
				title: '',
				article_count: '',
				is_recommend: '',
				tag_hit: '',
				status: '',
				seo_keywords: '',
				seo_title: '',
				seo_description: '',
			},
			rules: {
				title: [{ required: true, message: '请输入标签名', trigger: 'blur' }],
			},
			page: {
				total: 0,
				currentPage: 1,
				size: 10,
				pageSizes: [10, 20, 30, 40],
			}, // 分页器
		}
	},
	computed: {
		siteId1() {
			return this.$store.getters.siteId
		},
	},
	watch: {
		siteId1(val, value) {
			this.siteId = val

			this.getLang()
		},
	},
	created() {
		// this.getList()
		this.siteId = this.$store.getters.siteId
		if (this.siteId) {
			this.getLang()
		}
	},

	methods: {
		changeRecommend(row) {
			this.addForm = {
				id: row.id,
				title: row.title,
				article_count: row.article_count,
				is_recommend: row.is_recommend,
				tag_hit: row.tag_hit,
				status: row.status,
				seo_keywords: row.seo_keywords,
				seo_title: row.seo_title,
				seo_description: row.seo_description,
				website_id: this.siteId,
				lang: this.activeName,
			}
			tagApi.tagUpdate({ ...this.addForm }).then((res) => {
				if (res.code == 0) {
					this.dialogShow = false
					this.$message.success(res.msg)
					this.getList()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		changeStatus(row) {
			this.addForm = {
				id: row.id,
				title: row.title,
				article_count: row.article_count,
				is_recommend: row.is_recommend,
				tag_hit: row.tag_hit,
				status: row.status,
				seo_keywords: row.seo_keywords,
				seo_title: row.seo_title,
				seo_description: row.seo_description,
				website_id: this.siteId,
				lang: this.activeName,
			}
			tagApi.tagUpdate({ ...this.addForm }).then((res) => {
				if (res.code == 0) {
					this.dialogShow = false
					this.$message.success(res.msg)
					this.getList()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		// 切换tab
		handleClick(val) {
			this.activeName = val.name
			this.getList()
		},
		// 获取站点语言
		getLang() {
			websetApi.langInfo({ site_id: this.siteId }).then((res) => {
				this.langList = res.data

				if (res.data.length > 0) {
					this.activeName = res.data[0].lang
				}
				this.getList()
			})
		},
		// 标签列表
		getList() {
			const val = {
				limit: this.page.size,
				page: this.page.currentPage,
				lang: this.activeName,
				website_id: this.siteId,
			}
			tagApi.tagList(val).then((res) => {
				this.tagData = res.data
				this.page.total = res.total
			})
		},
		// 新增
		goAdd() {
			this.addForm.id = ''
			this.addForm = {
				title: '',
				article_count: '',
				is_recommend: 2,
				tag_hit: '',
				status: 1,
				seo_keywords: '',
				seo_title: '',
				seo_description: '',
				website_id: this.siteId,
				lang: this.activeName,
			}

			this.dialogShow = true
		},
		// 编辑
		edit(row) {
			this.addForm = {
				id: row.id,
				title: row.title,
				article_count: row.article_count,
				is_recommend: row.is_recommend,
				tag_hit: row.tag_hit,
				status: row.status,
				seo_keywords: row.seo_keywords,
				seo_title: row.seo_title,
				seo_description: row.seo_description,
				website_id: this.siteId,
				lang: this.activeName,
			}
			this.dialogShow = true
		},
		// 保存添加编辑
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					if (!this.addForm.id) {
						tagApi.tagSave({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.dialogShow = false
								this.$message.success(res.msg)
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					} else {
						tagApi.tagUpdate({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.dialogShow = false
								this.$message.success(res.msg)
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				} else {
					this.$message.error('请填写必要信息')
				}
			})
		},
		// 删除
		dele(row) {
			this.$confirm('此操作将删除该标签, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					tagApi.tagDelete({ id: row.id }).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		// 分页规格改变
		handleSizeChange(val) {
			this.page.size = val
			this.page.currentPage = 1
			this.getList()
		},
		// 分页点击
		handleCurrentChange(val) {
			this.page.currentPage = val
			this.getList()
		},
	},
}
</script>
<style lang="scss">
#tag {
	.el-date-editor.el-input.el-date-editor--date {
		width: 180px;
	}
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__item {
	background-color: #eee;
	border: none;
	margin-right: 5px;
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
	background-color: #fff;
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__nav {
	border-radius: 0;
	border: none;
}
.tabs.el-tabs--card .el-tabs__header {
	margin: 0;
}
.tabs.el-tabs--card > .el-tabs__header {
	border-bottom: 0;
}
</style>
<style scoped lang="scss">
.content {
	background-color: #fff;
	padding-top: 20px;
}
</style>
